<template>
    <div class="box">
        <div class="to">
            <div @click="fan">《 返回</div>
            <div>小u商城</div>
            <div></div>
        </div>
        <!-- 分类 -->
        <div class="ipt">
            <van-icon name="search" class="zi" />
            <input type="text" placeholder="按内容搜索">
        </div>
        <!-- 推荐 -->
        <ul class="tui">
            <li>综合推荐</li>
            <li>销量</li>
            <li>价格<van-icon name="back-top" /></li>
            <li>好评度</li>
            <li>店铺</li>
            <li><van-icon name="filter-o" />筛选</li>
        </ul>
        <div class="xuan">筛选11.11大促商品</div>
        <!-- 商品描述 -->
        <div class="shang" v-for="item in list" :key="item.id">
            <div class="ims">
                <img src="../assets/01.png">
            </div>
            <div class="wens">
                <div class="miao">{{ item.name }}</div>
                <span class="zi">{{item.miao}}</span>
                <div class="pic">
                    <span class="pic1">1</span>
                    <span class="pic2">2</span>
                    <span class="pic3">3</span>
                </div>
                <div class="xians">11.11限时299元起</div>
                <div class="jia">
                    <span>999</span><span></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:[
                {
                    "id":1,
                    "name":'溪木元山茶洁面泡沫 氨基酸好用请洁',
                    "miao":'敏感肌可用，控油去痘、男女可用...',

                }
            ]
        }
    },
    methods: {
        fan() {
            this.$router.go(-1)
        }
    },
}
</script>
<style lang="scss" scoped>
*{
    padding: 0;
    margin: 0;
}
.box {
    .wens{
        text-align: left;
        .jia{
            margin-left: 15px;
        }
        .xians{
            width: 100px;
            height: 15px;
            background-color: #ff6040;
            color: #fff;
            margin-left: 15px;
            font-size: 5px;
        }
        .pic{
            .pic1{
                color: #ff6040;
                font-weight: 900;
                font-size: 20px;
                padding-left: 15px;
            }
            .pic2{
                text-decoration: line-through;
                color: #ccc;
            }
            .pic3{
                padding-left: 10px;
                color: #ccc;
            }
        }
        .miao{
            font-size: 20px;
            color: #000;
            padding-left: 15px;
        }
        .zi{
            font-size: 15px;
            color: #ccc;
            padding-left: 15px;
        }
    }
    .shang{
        display: flex;
        width: 100%;
        height: 110px;
        // background-color: #fad2cb;
        .ims{
            width: 30%;
            height: 100%;
            margin-left: 10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .xuan {
        width: 96%;
        margin: 10px auto;
        border: 1px solid #ff7b6a;
        background-color: #fad2cb;
        height: 40px;
        line-height: 40px;
        color: #ff6040;
        font-weight: 900;
    }

    .tui {
        display: flex;
        width: 100%;

        li {
            list-style: none;
            color: #fff;
            background-color: #ff6040;
            width: 62.5px;
            height: 40px;
            font-size: 15px;
            line-height: 40px;
        }
    }

    .to {
        width: 100%;
        height: 30px;
        background-color: #ff6040;
        display: flex;
        justify-content: space-between;
        color: #fff;
        line-height: 30px;
        // padding: 0 10px;
    }

    .ipt {
        width: 100%;
        height: 40px;
        background-color: #ff6040;
        position: relative;

        .zi {
            position: absolute;
            top: 10px;
            left: 15px;
        }

        input {
            margin-top: 5px;
            width: 90%;
            height: 25px;
            border: 0;
            border-radius: 2px;
            padding-left: 25px;
        }
    }
}
</style>